<%-- 
    Document   : index
    Created on : Jun 3, 2012, 1:34:21 PM
    Author     : HoangVu
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:ice="http://ns.adobe.com/incontextediting">
    <head>
        <title>Home</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
        <link type="text/css" rel="stylesheet" href="css/rhinoslider-1.05.css"
              <link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css' />
        <link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css' />
        <link rel="stylesheet" type="text/css" media="screen" href="css/grid_12.css" />
        <link href='http://fonts.googleapis.com/css?family=Mr+De+Haviland' rel='stylesheet' type='text/css' />
        <link rel="stylesheet" type="text/css" media="screen" href="css/slider.css" />
        <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="js/tabs.js"></script>
        <link href='http://fonts.googleapis.com/css?family=Condiment' rel='stylesheet' type='text/css' />
        <link href='http://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css' />
        <script src="js/jquery-1.7.min.js"></script>
        <script src="js/jquery.easing.1.3.js"></script>
        <script src="js/tms-0.4.x.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
        <script type="text/javascript" src="js/rhinoslider-1.05.min.js"></script>
        <script type="text/javascript" src="js/mousewheel.js"></script>
        <script type="text/javascript" src="js/easing.js"></script>
        <script src="includes/ice/ice.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#slider').rhinoslider({autoPlay: true});
            });
        </script>
        <style type="text/css">
            body { background-color:#000; }


            #slider {
                width:600px;
                height:215px;

                /*IE bugfix*/
                padding:0;
                margin:0;
            }

            #slider li { list-style:none; }

            #page {
                width:600px;
                margin:50px auto;
            }
            
        </style>
    </head>
    <body>
        <div class="main">
            <div class="logo"><p class="text">Soul Music</p><p class="text1">Instrument</p></div>

            <div id="page" style="height: 320px">
                <ul id="slider">
                    <li><img src="images/home/slider/km01.jpg" alt="" /></li>
                    <li><img src="images/home/slider/km02.jpg" alt="" /></li>
                </ul>
            </div>             

            <div>
                <ul id="navigationMenu">
                    <li><a class="product" href="mainForm.jsp">
                            <img src="images/home/menu/home.jpg" alt="">
                            <span>PRODUCT</span></a>
                    </li>
                    <li><a class="gallery" href="gallery.jsp">
                            <img src="images/home/menu/gallery.jpg" alt="" />
                            <span>GALLERY</span></a>
                    </li>
                    <li><a class="about" href="about.jsp">
                            <img src="images/home/menu/about.jpg" alt="" />
                            <span>ABOUT US</span></a>
                    </li>
                </ul>
            </div>

            <div class="footer"><div class="v">INSTRUMENT SHOPPING &copy; 2012 &bull;</div>
                <div class="vlinks">Web design by TVTM Group &bull;</div>
            </div>
            <div class="foot"><a href="http://facebook.com"><img src="images/11.png" alt="" /></a>
                <a href="#"><img src="images/12.png" alt="" /></a>
                <a href="http://google.com"><img src="images/13.png" alt="" /></a>
                <a href="http://twitter.com"><img src="images/14.png" alt="" /></a></div>
        </div>
            <div class="rain">
                <div class="border start">
                    <form action="ControlServlet" method="POST">
                        <label for="email">Email</label>
                        <input name="txtUsername" type="text" placeholder="Email"/>
                        <label for="pass">Password</label>
                        <input name="txtPassword" type="password" placeholder="Password"/>
                        <input type="submit" value="Login" name="btnAction"/>
                    </form>
                </div>
            </div>
    </body>
</html>
